<template>
  <el-header class="app-header">
    <!-- 左侧Logo区域 -->
    <div class="header-left">
      <i class="fa fa-cloud text-primary text-2xl mr-3"></i>
      <router-link to="/" class="header-title">MY云盘</router-link>
    </div>
    <!-- 右侧用户区域 -->
    <div class="header-right">
      <el-dropdown @command="handleMenuCommand">
        <div class="user-info flex items-center cursor-pointer">
          <img
              :src="avatarUrl||'/default.jpg'"
              alt="用户头像"
              class="user-avatar"
              @error="handleImageError">
          <span class="user-name ml-2">{{ user?.username || '未登录' }}</span>
          <i class="fa fa-caret-down ml-1 text-gray-500"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="profile">
            <i class="fa fa-user-circle-o mr-2"></i> 个人资料
          </el-dropdown-item>
          <el-dropdown-item command="logout" divided>
            <i class="fa fa-sign-out mr-2"></i> 退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script>
import axios from "axios";
import service from '@/utils/request'; // 引入项目中的axios实例
export default {
  name: 'HeaderComponent',
  data() {
    return {
    }
  },
  computed: {
    user() {
      return this.$store.state.userData || {};
    },
    avatarUrl(){
      const email = this.$store.state.userData?.email;
      return "/"+email+".jpg";
    }
  },
  methods: {
    handleImageError(event) {
      // 或者使用默认图片：
      event.target.src = '/default.jpg';
    },

    // 菜单命令处理
    // 菜单命令处理（简化）
    handleMenuCommand(command) {
      switch(command) {
        case 'logout':
          this.handleLogout(); // 仅通过 command 触发一次退出逻辑
          break;
        case 'profile':
          this.$router.push('/personaldata');
          break;
        case 'settings':
          this.$router.push('/settings');
          break;
      }
    },
    // 退出登录方法
    handleLogout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          this.$store.commit('logout');

          // 2. 清理自定义axios实例的请求头
          delete service.defaults.headers.common['Authorization'];

          // 3. 触发全局事件通知其他组件（可选）
          this.$root.$emit('logout');

          // 4. 显示成功消息
          this.$message({
            message: '已成功退出登录',
            type: 'success'
          });

          // 4. 跳转到登录页（避免重复导航）
          if (this.$route.path !== '/login') {
            this.$router.push('/login');
          }
        } catch (error) {
          this.$message({
            message: `退出登录失败: ${error.message}`,
            type: 'error'
          });
        }
      }).catch(() => {
        // 取消操作时的提示（可选）
        this.$message({
          type: 'info',
          message: '已取消退出操作'
        });
      });
    }
  }
}
</script>

<style scoped>
/* 应用头部样式 */
.app-header {
  height: 60px; /* 固定头部高度 */
  padding: 0 20px; /* 左右内边距 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 水平两端对齐 */
  border-bottom: 1px solid rgba(39, 147, 236, 0.53);
}

/* 左侧Logo区域 */
.header-left {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}

.header-title {
  font-size: 18px; /* 标题字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #303133; /* 标题颜色 */
}

/* 用户区域样式 */
.header-right {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}

.user-info {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  cursor: pointer; /* 鼠标指针样式 */
}

.user-avatar {
  width: 32px; /* 头像宽度 */
  height: 32px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  object-fit: cover; /* 图片填充方式 */
  border: 2px solid #e4e7ed; /* 头像边框 */
  transition: border-color 0.3s; /* 边框颜色过渡效果 */
}

.user-avatar:hover {
  border-color: #409EFF; /* 鼠标悬停时的边框颜色 */
}

.user-name {
  margin-left: 8px; /* 与头像的间距 */
  font-weight: 500; /* 字体粗细 */
  color: #303133; /* 用户名颜色 */
}

/* 下拉菜单样式优化 */
.el-dropdown-menu__item {
  padding: 0 10px; /* 菜单项内边距 */
}

.el-dropdown-menu__item i {
  width: 18px; /* 图标宽度 */
}
</style>